import {
  BrowserRouter as Router,
  Route,
  Routes,
  useNavigate,
} from "react-router-dom";

// Import components
import NotFound from "@/views/NotFound/NotFound";
import Permissions from "@/views/Permissions/Permissions";
import Roles from "@/views/Roles/Roles";
import RolesPermissions from "@/views/RolesPermissions/RolesPermissions";
import Users from "@/views/Users/Users";
import UsersRoles from "@/views/UsersRoles/UsersRoles";
import Login from "@/views/Login/Login";
import Home from "@/views/Home/Home";
import Cate from "@/views/Cate/Cate";
import System from "@/views/System/System";
import Dict from "@/views/Dict/Dict";
import Task from "@/views/Task/Task";
import Product from "@/views/Product/Product";
import Attr from "@/views/Attr/Attr";
import Brand from "@/views/Brand/Brand";
import Comment from "@/views/Comment/Comment";
import Unit from "@/views/Unit/Unit";
import Layout from "@/views/Layout/Layout";
import UserAdd from "@/views/UsersAdd/UserAdd";
import Assign from "@/views/Users/Assign ";
const staticRoutes = [
  {
    path: "/login",
    element: <Login />,
    meta: {
      hidden: true,
    },
  },
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "home",
        element: <Home />,
        meta: {
          title: "首页",
          icon: "HomeFilled",
          affix: true,
        },
      },
    ],
  },
];

export const allAsyncRoutes = [
  {
    path: '/acl',
    element: <Layout />,
    title: '权限管理',
    icon: 'Lock',
    meta: {
      name: 'Acl',
    },
    children: [
      {
        path: 'users/:id',
        element: <UsersRoles />,
        meta: {
          hidden: 'true',
          name: 'UsersRoles',
        },
      },
      {
        path: 'users',
        element: <Users />,
        title: '用户管理',
        icon: 'User',
        meta: {
          name: 'Users',
        },
      },
      {
        path: "usersadd",
        element: <UserAdd />,
      },
      {
        path: "assign/:id",
        element: <Assign />,
      },
      {
        path: 'roles/:id',
        element: <RolesPermissions />,
        meta: {
          hidden: 'true',
          name: 'RolesPermissions',
        },
      },
      {
        path: 'roles',
        element: <Roles />,
        title: '角色管理',
        icon: 'UserFilled',
        meta: {
          name: 'Roles',
        },
      },
      {
        path: 'permissions',
        element: <Permissions />,
        title: '权限管理',
        icon: 'Lock',
        meta: {
          name: 'Permissions',
        },
      },
    ],
  },
  {
    path: '/settings',
    element: <Layout />,
    title: '系统设置',
    icon: 'Setting',
    meta: {
      name: 'Settings',
    },
    children: [
      {
        path: 'cate',
        element: <Cate />,
        title: '分类管理',
        icon: 'Category',
        meta: {
          name: 'Cate',
        },
      },
      {
        path: 'system',
        element: <System />,
        title: '系统设置',
        icon: 'Setting',
        meta: {
          name: 'System',
        },
      },
      {
        path: 'dict',
        element: <Dict />,
        title: '数据字典',
        icon: 'Document',
        meta: {
          name: 'Dict',
        },
      },
      {
        path: 'task',
        element: <Task />,
        title: '定时任务',
        icon: 'Timer',
        meta: {
          name: 'Task',
        },
      },
    ],
  },
  {
    path: '/business',
    element: <Layout />,
    title: '业务管理',
    icon: 'Business',
    meta: {
      name: 'Business',
    },
    children: [
      {
        path: 'product',
        element: <Product />,
        title: '产品管理',
        icon: 'Document',
        meta: {
          name: 'Product',
        },
      },
      {
        path: 'attr',
        element: <Attr />,
        title: '商品规格',
        icon: 'Document',
        meta: {
          keepAlive: 'true',
          name: 'Attr',
        },
      },
      {
        path: 'brand',
        element: <Brand />,
        title: '商品品牌',
        icon: 'Document',
        meta: {
          keepAlive: 'true',
          name: 'Brand',
        },
      },
      {
        path: 'comment',
        element: <Comment />,
        title: '商品评论',
        icon: 'Document',
        meta: {
          keepAlive: 'true',
          name: 'Comment',
        },
      },
      {
        path: 'unit',
        element: <Unit />,
        title: '商品单位',
        icon: 'Document',
        meta: {
          keepAlive: 'true',
          name: 'Unit',
        },
      },
    ],
  },
];

export const anyRoute = {
  path: "*",
  element: <NotFound />,
  meta: {
    hidden: true,
  },
};

function AppRouter() {
  // const {
  //   cats: { routeStore },
  // } = useCatStore();
  // console.log(routeStore,'路由');
  return (

    <Routes>
      {/* Static Routes */}
      {staticRoutes.map((route, index) => (
        <Route key={index} path={route.path} element={route.element}>
          {route.children &&
            route.children.map((childRoute, childIndex) => (
              <Route
                key={childIndex}
                path={childRoute.path}
                element={childRoute.element}
              />
            ))}
        </Route>
      ))}

      {/* Async Routes */}
      {allAsyncRoutes.map((route, index) => (
        <Route key={index} path={route.path} element={route.element}>
          {route.children &&
            route.children.map((childRoute, childIndex) => (
              <Route
                key={childIndex}
                path={childRoute.path}
                element={childRoute.element}
              />
            ))}
        </Route>
      ))}

      {/* Catch-all Route */}
      <Route path={anyRoute.path} element={anyRoute.element} />
    </Routes>

  );
}

export default AppRouter;
